<template>
  <div>
      <div class="table-bar">
       <!-- 在这里使用 Tabbaritem组件 在这里插入两个内容-->
        <Tabbaritem path='/cart' activecolor='blue'>  <!--activecolor 动态绑定它的颜色值 -->
        <img slot='icon' src="~assets/img/images/index.png" alt="">
        <!-- 使用别名路径 需要在前面加 ~ 符号 -->
        <img slot='icon-active' src="~assets/img/images/index-active.png" alt="">
        <div slot="text">首页</div>
       </Tabbaritem>
      
       <Tabbaritem path='/home' activecolor='green'>
        <img slot='icon' src="~assets/img/images/home.png" alt="">
        <img slot='icon-active' src="~assets/img/images/home-active.png" alt="">
        <div slot="text">Home</div>

       </Tabbaritem> 
       <Tabbaritem path='/category' activecolor='pink'>
        <img slot='icon' src="~assets/img/images/or.png" alt="">
        <img slot='icon-active' src="~assets/img/images/or-active.png" alt="">
        <div slot="text">分类</div>
       </Tabbaritem>
       
       <Tabbaritem path='/profile' activecolor='red'>
        <img slot='icon' src="~assets/img/images/shopping.png" alt="">
        <img slot='icon-active' src="~assets/img/images/shopping-active.png" alt="">
        <div slot="text">购物车</div>
      </Tabbaritem>
    </div>
  </div>
</template>
<script>
import Tabbaritem from 'components/tabbar/Tabbaritem'
export default {
  name:'Tabbar', 
  components:{
    Tabbaritem
  }
}
</script>
<style lang="">
  .table-bar{
    display: flex;
    background-color: #f6f6f6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(100, 100, 100, .2) ;
  }

</style>